<template>
  <div>
    <Myheader>
      <div slot="nav"></div>
    </Myheader>
    <div class="goods">
      <div class="nav-subs">
        <div class="nav-sub-bgs"></div>
        <div class="nav-sub-wrappers">
          <div class="w">
            <ul class="nav-lists">
              <li>
                <router-link to="/">
                  <a>首页</a>
                </router-link>
              </li>
              <li>
                <a class="active">搜索结果</a>
              </li>
              <li>
                <a v-if="searching === true">拼命搜索中...</a>
                <a v-if="searching === false">共为您找到 {{total}} 款商品信息</a>
              </li>
            </ul>
            <div></div>
          </div>
        </div>
      </div>

      <div class="nav">
        <div class="w">
          <a @click="reset()" :class="{ active: isIndex === 0 }" href="javascript:;">综合排序</a>
          <a @click="handleOrder(1)" :class="{ active: isIndex === 1 }" href="javascript:;" >价格从低到高</a>
          <a @click="handleOrder(2)" :class="{ active: isIndex === 2 }" href="javascript:;" >价格从高到低</a>
          <div class="price-interval">
            <input type="number" class="input" placeholder="价格" v-model.number="queryInfo.min">
            <span style="margin: 0 5px"> - </span>
            <input type="number" placeholder="价格" v-model.number="queryInfo.max">
            <el-button type="primary" size="small" style="margin-left:10px" @click="search()">确定</el-button>
          </div>
        </div>
      </div>
      
      <div v-loading="loading" element-loading-text="加载中..." style="min-height: 35vw;">
        <div  class="img-item" v-if="!noResult" >
          <!--商品-->
          <div class="goods-box w">
            <mall-goods v-for="(item,i) in allGoods" :key="i" :goods="item"></mall-goods>
          </div>

          <el-pagination
            v-if="!noResult&&!error"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum"
            :page-sizes="[1, 5, 10, 20]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <div class="no-info" v-if="noResult" >
          <div class="no-data">
            <img src="../../../public/images/no-search.png">
            <br> 抱歉！没有为您找到相关的商品
          </div>
          <!-- <section class="section">
            <y-shelf :title="recommendPanel.name">
              <div slot="content" class="recommend">
                <mall-goods :msg="item" v-for="(item,i) in recommendPanel.panelContents" :key="i"></mall-goods>
              </div>
            </y-shelf>
          </section> -->
        </div>
        <div class="no-info" v-if="error">
          <div class="no-data">
            <img src="../../../public/images/error.png">
            <br> 抱歉！出错了...
          </div>
          <!-- <section class="section">
            <y-shelf :title="recommendPanel.name">
              <div slot="content" class="recommend">
                <mall-goods :msg="item" v-for="(item,i) in recommendPanel.panelContents" :key="i"></mall-goods>
              </div>
            </y-shelf>
          </section> -->
        </div>
      </div>
    </div>
    <MyFooter></MyFooter>
  </div>
  
</template>
<script>
import MallGoods from '../../components/MallGoods.vue'
import Myheader from '../../common/MHeader.vue'
import MyFooter from '../../common/MFooter.vue'
import { getSearchGoodsInfo } from '../../api/goods'
export default {
  data () {
    return {
      // 商品的查询参数
      queryInfo: {
        productInfo: '',
        pageNum: 1,
        pageSize: 10,
        min: null,
        max: null,
        goodstype: 0,
        order: 0
      },
      // 所有商品数据
      allGoods: [],
      isIndex: null,
      // 商品总数
      total: 0,
      loading: true,
      searching: true,
      noResult: false,
      error: false,
    }
  },
  methods: {
    async getAllGoods() {
      const { data: res } = await getSearchGoodsInfo(this.queryInfo)
      console.log(res)
      if (res.code !== 0) {
        this.error = true
        return this.$message.error('获取商品失败！')
      }
      if (res.result.total === 0) {
        this.noResult = true
      }
      this.allGoods = res.result.list
      this.total = res.result.total
      this.loading = false
      this.searching = false
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize = size
      this.getAllGoods()
    },
    handleCurrentChange(Num) {
      this.queryInfo.pageNum = Num
      this.getAllGoods()
    },
    // 默认排序
    reset() {
      this.isIndex = 0
      this.queryInfo.order= 0
      this.queryInfo.min = null
      this.queryInfo.max = null
      this.getAllGoods()
    },
    // 价格排序
    handleOrder(v) {
      this.isIndex = v
      this.queryInfo.order = v
      this.getAllGoods()
    },
    search() {
      if(typeof this.queryInfo.min !== 'number' || typeof this.queryInfo.max !== 'number'){
        return this.$message.error('请输入商品价格')
      }
      this.getAllGoods()
    }
  },
  created () {

  },
  mounted () {
    this.queryInfo.productInfo = this.$route.query.key
    this.getAllGoods()
    /* recommend().then(res => {
      let data = res.result
      this.recommendPanel = data[0]
    }) */
  },
  components: {
    MallGoods,
    Myheader,
    MyFooter
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/style/mixin";
  @import "../../assets/style/theme";

  .nav {
    height: 60px;
    line-height: 60px;
    > div {
      display: flex;
      align-items: center;
      a {
        padding: 0 15px;
        height: 100%;
        @extend %block-center;
        font-size: 12px;
        color: #999;
        &.active {
          color: #5683EA;
        }
        &:hover {
          color: #5683EA;
        }
      }
      input {
        @include wh(80px, 30px);
        border: 1px solid #ccc;
      }
      input + input {
        margin-left: 10px;
      }
    }
    .price-interval {
      padding: 0 15px;
      @extend %block-center;
      input[type=number] {
        border: 1px solid #ccc;
        text-align: center;
        background: none;
        border-radius: 5px;
      }
    }
  }

  .goods-box {
    > div {
      float: left;
      border: 1px solid #efefef;
    }
  }

  .nav-subs {
    position: relative;
    z-index: 20;
    height: 75px;
    background: #f7f7f7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
    .nav-sub-wrappers {
      padding: 25px 0;
      height: 90px;
      position: relative;
    }
    .w {
      display: flex;
      justify-content: space-between;
    }
    .nav-lists {
      height: 28px;
      line-height: 28px;
      display: flex;
      align-items: center;
      height: 100%;
      li:first-child {
        padding-left: 0;
        a {
          padding-left: 10px;
        }
      }
      li {
        position: relative;
        float: left;
        padding-left: 2px;
        a {
          display: block;
          // cursor: default;
          padding: 0 10px;
          color: #666;
          &.active {
            font-weight: bold;
          }
        }
        a:hover {
          color: #5683EA;
        }
      }
      li:before {
        content: ' ';
        position: absolute;
        left: 0;
        top: 13px;
        width: 2px;
        height: 2px;
        background: #bdbdbd;
      }
    }
  }

  .no-info {
    padding: 100px 0;
    text-align: center;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    .no-data{
      align-self: center;
    }
  }

  .section {
    padding-top: 8vw;
    margin-bottom: -5vw;
    width: 1218px;
    align-self: center;
  }

  @media (min-width: 1px) {
    .nav-subs .nav-sub-wrappers:after {
      display: block;
    }
  }

  .recommend {
    display: flex;
    > div {
      flex: 1;
      width: 25%;
    }
  }

  .img-item{
    display: flex;
    flex-direction: column;
  }

  .el-pagination{
    align-self: flex-end;
    margin: 3vw 10vw 2vw;
  }


</style>
